<!DOCTYPE HTML>
<html>
	<head>
		<script type="text/javascript" src="/hui-ui/lib/My97DatePicker/4.8/WdatePicker.js"></script>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="/lay/css/layui.css"  media="all">
	</head>
	<body>
<div class="cl pd-5"> 
	<span class="l">
		开始:<input type="text" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}'})" id="logmin" class="input-text Wdate" style="width:105px;">
		结束:<input type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d'})" id="logmax" class="input-text Wdate" style="width:105px;">
		<button id="queryDeptBtn" class="btn btn-primary radius size-S" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 刷新</button>
		<button id="queryDeptBtn" class="btn btn-secondary radius size-S" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 新增</button>
		<button id="queryDeptBtn" class="btn btn-secondary radius size-S" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 保存</button>
		<button id="queryDeptBtn" class="btn btn-danger radius size-S" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 删除</button>
	</span>
	<span class="r">
	
	</span>
</div>

<table id="demo" lay-filter="test"></table>         

<input type="hidden" id="childFormMsg"/>
<script src="/lay/layui.js" charset="utf-8"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  // table数据处理
  table.render({
	    elem: '#demo'
	    ,id : 'test'
	    ,height: 'full-179'
	    ,url: 'layuiTable.json' //数据接口
	    //,where: {} // 传递参数
	    //,method: 'post'
	    ,page: true //开启分页
	    ,cols: [[ //表头
	      {field: 'timepoint', title: '日期时间', width:150, sort: true, fixed: 'left'}
	      ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left',style:'display:none'}
	      ,{field: 'username', title: '用户名', width:80,edit: 'text'}
	      ,{field: 'email', title: '邮箱', width:100}
	      ,{field: 'sex', title: '性别', width:70, sort: true,edit: 'text'}
	      ,{field: 'city', title: '城市', width:80,edit: 'text'} 
	      ,{field: 'experience', title: '积分', width: 80, sort: true}
	      ,{field: 'score', title: '评分', width: 80, sort: true}
	      ,{field: 'classify', title: '职业', width: 80}
	      ,{field: 'wealth', title: '财富', width: 135, sort: true}
	      ,{field: 'sign', title: '描述', width: 177}
	      ,{field: 'userid', title: '签名', width: 80,fixed: 'right'}
	    ]]
  		,limits: [10,20,30,40,50]
  		,limit: 20
  		,even: true // 开启隔行背景
  		,size: 'sm'  // sm小尺寸的表格 、 lg大尺寸的表格
	  });
  //监听单元格编辑
  table.on('edit(test)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
  });
});
</script>
</body>
</html>